<template>
  <div class="inner-contaienr">
    <div class="outer-box">
      <div class="news-layout">
        <!-- 左侧图片 -->
        <div class="left-section">
          <img src="~@/static/hightScoew.png" class="hight-score" alt="News Image" />
        </div>

        <!-- 右侧内容 -->
        <div class="right-section">
          <div class="header">
            <ScrollingNews :news="newsData" />
          </div>
        </div>
      </div>
    </div>
    <div class="header-more" @click="goToConsultList">
      更多捷报
      <el-icon>
        <ArrowRight />
      </el-icon>
    </div>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
defineProps({
  imageUrl: {
    type: String,
    required: true,
  },
  newsData: {
    type: Array,
    required: true,
  },
});

const goToConsultList = () => {
  if (handlePath(route.name) == 1) {
    router.push(`/recordsList?typeid=442`);
  } else if (handlePath(route.name) == 2) {
    router.push(`/recordsList?typeid=447`);
  } else if (handlePath(route.name) == 3) {
    router.push(`/recordsList?typeid=453`);
  }
};
</script>

<style scoped>
.inner-contaienr {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 16px 10px 16px 10px;
  align-items: center;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 4px 6px 0px #219fc71c;
  height: 58px;
  background: linear-gradient(270deg, #ffe8df 0%, #ffd2c5 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.hight-score {
  width: 120px;
  height: 39px;

  /* background-color: #FFFFFFB2; */
}
.header-more {
  display: flex;
  align-items: center;
  color: #000;
  font-size: 14px;
  cursor: pointer;

  .el-icon {
    margin-left: 4px;
  }

  &:hover {
    color: #126983;
  }
}
.outer-box {
  flex: 1;
  width: 647px;
  height: 58px;
  border-radius: 7px;
  background-color: transparent;
  display: flex;
  align-items: center;
}

.news-layout {
  display: flex;
  gap: 20px;
  flex: 1;
  /* margin-right:40px; */
  align-items: center;
  padding: 2px 10px;
  box-sizing: border-box;
  /* padding: 8px; */
  border-radius: 8px;
}

.right-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 33px;
  background-color: #ffffffb2;
  padding-left: 10px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* margin-bottom: 15px; */
}

.header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.more-link {
  text-decoration: none;
  color: #666;
  font-size: 14px;
  cursor: pointer;
}

.more-link:hover {
  color: #1890ff;
}
</style>
